<template>
	<view class="container">
		<view class="topline">
		</view>
		<view class="warp u-m-t-20">		
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="专业" prop="zy">
					<u-input
						type="select"
						:select-open="selectShowZy"
						v-model="model.zy"
						placeholder="请选择"
						placeholderStyle="color: #0D1D36;"
						input-align="right"
						@click="selectShowZy = true"
					></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="性别" prop="xb">
					<u-input
						type="select"
						:select-open="selectShowXb"
						v-model="model.xb"
						placeholder="请选择"
						placeholderStyle="color: #0D1D36;"
						input-align="right"
						@click="selectShowXb = true"
					></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="学历" prop="xl">
					<u-input
						type="select"
						:select-open="selectShowXl"
						v-model="model.xl"
						placeholder="请选择"
						placeholderStyle="color: #0D1D36;"
						input-align="right"
						@click="selectShowXl = true"
					></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="职称" prop="zc">
					<u-input
						type="select"
						:select-open="selectShowZc"
						v-model="model.zc"
						placeholder="请选择"
						placeholderStyle="color: #0D1D36;"
						input-align="right"
						@click="selectShowZc = true"
					></u-input>
				</u-form-item>

				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="执业资格" prop="zyzg">
					<u-input
						type="input"
						v-model="model.zyzg"
						placeholder="请输入"
						placeholderStyle="color: #4B9CFF;"
						input-align="right"
					></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="人数" prop="rs">
					<u-input
						type="input"
						v-model="model.rs"
						placeholder="请输入"
						placeholderStyle="color: #9DA2B0;"
						input-align="right"
					></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="warp u-m-t-20 u-p-30">
			<u-button class="button" @click="submit">确定</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="zyList" v-model="selectShowZy" @confirm="selectConfirmZy"></u-select>
			<u-select mode="single-column" :list="xbList" v-model="selectShowXb" @confirm="selectConfirmXb"></u-select>
			<u-select mode="single-column" :list="xlList" v-model="selectShowXl" @confirm="selectConfirmXl"></u-select>
			<u-select mode="single-column" :list="zcList" v-model="selectShowZc" @confirm="selectConfirmZc"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowQydy" @confirm="selectConfirmQydy"></u-select>
			<!-- <u-select mode="single-column" :list="selectList" v-model="selectShowLyxy" @confirm="selectConfirmLyxy"></u-select> -->
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
export default {
	data() {
		let that = this;
		return {
			/**
			 * form验证
			 * */
			model: {},
			selectList: [
				{
					value: '测试1',
					label: '测试1'
				},
				{
					value: '测试2',
					label: '测试2'
				},
				{
					value: '测试3',
					label: '测试3'
				}
			],
			zyList: [
				{
					value: '计算机',
					label: '计算机'
				}
			],
			zcList: [
				{
					value: '测试工程师',
					label: '测试工程师'
				}
			],
			xlList: [
				{
					value: '本科',
					label: '本科'
				},
				{
					value: '专科',
					label: '专科'
				},
				{
					value: '研究生',
					label: '研究生'
				}
			],
			xbList: [
				{
					value: '男',
					label: '男'
				},
				{
					value: '女',
					label: '女'
				},
				{
					value: '不限',
					label: '不限'
				}
			],
			rules: {
				qymc: [
					{
						required: false,
						message: '请输入企业名称',
						trigger: 'blur'
					}
				],
				ws: [
					{
						required: false,
						message: '请选择我是',
						trigger: 'change'
					}
				],
				wxy: [
					{
						required: false,
						message: '请选择我需要',
						trigger: 'change'
					}
				],
				wyx: [
					{
						required: false,
						message: '请选择我意向',
						trigger: 'change'
					}
				]
			},
			pageType: "",
			required: false,
			border: false,
			check: false,
			selectStatus: 'close',
			selectShowZy: false,
			selectShowXb: false,
			selectShowXl: false,
			selectShowZc: false,
			selectShowQydy: false,
			selectShowLyxy: false,
			labelPosition: 'left',
			codeTips: '',
			errorType: ['toast'],
			/**/

			/**
			 * 数字统计
			 * */
			startVal: 500,
			endVal: 500,
			separator: ',',
			decimals: 0,
			duration: 2000,
			autoplay: true,
			useEasing: true,
			current: 3,
			isStop: false,
			bold: false,
			fontSize: 24,
			color: '#fff',
			/**/
			keyIndex:0,
			keywords: '',
		};
	},
	mounted() {},
	onLoad(options){
		if(options.type){
			this.pageType = options.type;
		}
		if(options.data){
			let data = JSON.parse(decodeURIComponent(options.data));
			this.pageType = data.type;
			this.$delete(data,'type');
			this.model = data;
			console.log(this.model);
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
					if(this.pageType == "tuandui"){
						this.$mRouter.push({
							route:this.$mRoutesConfig.zhtd,
						 	query:{
						 		hy:encodeURIComponent(JSON.stringify(this.model)),
						 	}
						})
					}else if(this.pageType == "fuwu"){
						this.$mRouter.push({
							route:this.$mRoutesConfig.zhfw,
						 	query:{
						 		hy:encodeURIComponent(JSON.stringify(this.model))
						 	}
						})
					}
					
				} else {
					console.log('验证失败');
				}
			});
		},
		selectKey(e){
			this.keywords[e].selected = !this.keywords[e].selected;
		},
		// 选择
		selectConfirmZy(e) {
			this.model.zy = '';
			e.map((val, index) => {
				this.model.zy += this.model.zy == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmXb(e) {
			this.model.xb = '';
			e.map((val, index) => {
				this.model.xb += this.model.xb == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmXl(e) {
			this.model.xl = '';
			e.map((val, index) => {
				this.model.xl += this.model.xl == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmZc(e) {
			this.model.zc = '';
			e.map((val, index) => {
				this.model.zc += this.model.zc == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmQydy(e) {
			this.model.qydy = '';
			e.map((val, index) => {
				this.model.qydy += this.model.qydy == '' ? val.label : '-' + val.label;
			});
		}
	}
};
</script>
<style scoped lang="scss">
page {
	background: #fff;
}
.topline {
		width: 100%;
		height: 20rpx;
		background: #F5F5F9;
	}
.warp {
	background: #fff;
}
.count {
	.count-to {
		font-size: 24rpx;
	}
	text {
		padding: 2rpx 12rpx;
		background: #ff9e21;
		color: #ffffff;
		font-size: 24rpx;
	}
}
.group {
	padding: 6rpx 21rpx;
	background: #f1f7ff;
	border-radius: 6rpx;
	margin: 30rpx 30rpx 0 30rpx;
}
.button {
	width: 662rpx;
	margin:324rpx auto 95rpx auto;
	background: #ab61ff;
	border-radius: 40rpx;
	border: 0;
	color: #fff;
	
font-size: 32rpx;
	&.u-hairline-border:after {
		border: 0;
	}
}
.word {
	font-size: 36rpx;
	color: #0d1d36;
	font-weight: bold;
}
.keywords {
	display: flex;
	flex-flow: wrap;
	view {
		margin:0 20rpx 20rpx 0;
		padding: 8rpx 21rpx;
		background: #f6f6f6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text {
			display: block;
			width: 16rpx;
			height: 16rpx;
			margin-left:19rpx;
			border: 4rpx solid #BDBDBD;
			border-radius: 8rpx;

		}
		&.selected {
			color:#4B9CFF;
			text {border-color:#4B9CFF;background-color: #4B9CFF;}
		}
	}
}
</style>
